(function slider() {
    const sliderDate = [
        { url: 'image/3.jpg' },
        { url: 'image/4.jpg' },
        { url: 'image/5.jpg' },
    ]
    const img = document.querySelector('.bd img')
    let i = 0
    setInterval(function () {
        i++
        if (i >= sliderDate.length) {
            i = 0
        }
        img.src = sliderDate[i].url
        document.querySelector('.bd ul .active').classList.remove('active')
        document.querySelector(`.bd li:nth-child(${i + 1})`).classList.add('active')
    }, 2000)
})();

(function data1() {
    /**@type {HTMLElement} */
    let target = document.querySelector('.posts .card')
    target.innerHTML = ""
    let url = './data/data1.json'
    let xhr = new XMLHttpRequest()
    xhr.open("get", url)
    xhr.send()
    xhr.onload = function () {
        let data = JSON.parse(xhr.responseText).row
        for (let i = 0; i < data.length; i++) {
            target.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                     <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                                    </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                       <span>${data[i].time}</span>
                        </div>
                        </div>
                </li>
            </ul>
            `
        }
    }
    xhr.onerror = function () {
        console.error("数据获取失败");
      };
})();

(function data2() {
    /**@type {HTMLElement} */
    let t1 = document.querySelector('.category .t1')
    let t2 = document.querySelector('.category .t2')
    let t3 = document.querySelector('.category .t3')
    let t4 = document.querySelector('.category .t4')
    let t5 = document.querySelector('.category .t5')
    let t6 = document.querySelector('.category .t6')
    t1.innerHTML = ""
    t2.innerHTML = ""
    t3.innerHTML = ""
    t4.innerHTML = ""
    t5.innerHTML = ""
    t6.innerHTML = ""
    let url = './data/data2.json'
    let xhr = new XMLHttpRequest()
    xhr.open("get", url)
    xhr.send()
    xhr.onload = function () {
        let data = JSON.parse(xhr.responseText).row
        for (let i = 0; i < 7; i++) {
            t1.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
        for (let i = 7; i < 14; i++) {
            t2.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
        for (let i = 14; i < 21; i++) {
            t3.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
        for (let i = 21; i < 28; i++) {
            t4.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
        for (let i = 28; i < 33; i++) {
            t5.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
        for (let i =33; i < 38; i++) {
            t6.innerHTML += `
           <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="zy">
                        <div class="left">
                            <a href="#"><i>
                                <img class="ad" src="./image/img.png" alt="">
                            </i>${data[i].text}</a>
                        </div>
                        <div class="right">
                            <span>${data[i].time}</span>
                        </div>
                    </div>
                </li>
            </ul>
            `
        }
    }
    xhr.onerror = function () {
        console.error("数据获取失败");
      };
})();